<!DOCTYPE html>
<html lang="zh-cn">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=3,minimum-scale=1,maximum-scale=1,user-scalable=no">

		<title>ablog-index</title>

		<link href="static/img/favicon.ico" rel="icon" type="image/x-icon">
		<link href="static/img/favicon.ico" rel="shortcut icon" type="image/x-icon">
		<link href="static/img/favicon.ico" rel="bookmark" type="image/x-icon">
		<link href="static/css/app.css" rel="stylesheet" type="text/css">
		<link href="static/css/index.css" rel="stylesheet" type="text/css">
		<!-- ajax -->
		<script src="static/js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="static/js/jquery.session.js" type="text/javascript" charset="utf-8"></script>
		<script src="static/js/vue.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="static/js/axios.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="static/js/util.js" type="text/javascript" charset="utf-8"></script>
		<!-- layui -->
		<link href="static/layui/css/layui.css" rel="stylesheet" type="text/css">
		<script src="static/layui/layui.js" type="text/javascript" charset="utf-8"></script>
	</head>

	<body style="position: static; overflow: visible;">
		<div class="app" id="list" v-cloak>
			<div class="left-container">
				<div class="left-layout-container pc">
					<div class="user-info">
						<img :src="systemobj.headimg" @click="jump('about.html')">
						<div class="login-name">{{systemobj.name}}</div>
						<div>{{systemobj.context}}</div>
					</div>
					<ul class="other-site">
						<li><a :href="systemobj.csdn" target="_blank"><img src="static/img/csdn.png"></a></li>
						<li><a :href="systemobj.git" target="_blank"><img src="static/img/git.png"></a></li>
					</ul>
					<ul class="left-menu">
						<li class="router-link-exact-active router-link-active selected-menu" @click="jump('index.html')">个人博客</li>
						<li class="" @click="jump('about.html')">About Me</li>
					</ul>
					<div class="qq-group">
						<span>打&nbsp;赏&nbsp;扫&nbsp;码</span>
						<img :src="systemobj.qrcode">
					</div>
					<div class="copyright">{{systemobj.copyright}}</div>
				</div>
			</div>

			<div class="blog-container main-container">
				<ul class="label-list">
					<li><span :class="activeClass == -1 ? 'tag color_blue':'tag tag-unchecked'" @click="getItme(-1,'')">ALL</span></li>
					<li v-for="(item,index) in typeobj">
						<span :class="activeClass == index ? 'tag color_blue':'tag tag-unchecked'" :id="item.id" @click="getItme(index,item.id)">{{item.name}}</span>
					</li>
				</ul>
				<div class="blog-list-container">
					<div class="table-header"><span>标&nbsp;题</span><span>创&nbsp;建&nbsp;时&nbsp;间</span></div>
					<ul class="issue-list" id="issue">
						<li class="issue-item" v-for="item in obj.list">
							<a class="" @click="jump('article.html',item.aid)">{{item.title}}</a>
							<ul>
								<li class="tag tag-small color_green">{{item.articleType.name}}</li>
							</ul>
							<span class="time">{{item.addtime}}</span>
						</li>
					</ul>

					<div class="bottom-bar">
						<input type="text" placeholder="按文章标题或内容搜索..." class="fl query" v-model="value" @change="changeForVal($event)">
						<div class="paginataion-container">
							<img class="pre-page" @click="obj.prePage > 0?(value=='' ? loadPage(obj.prePage,typeid):loadPageByVal(obj.prePage,value)):''">
							<span class="page-count" v-if="obj.pages > 0">{{obj.pageNum}}&nbsp;/&nbsp;{{obj.pages}}</span>
							<span class="page-count" v-if="obj.pages == 0">0&nbsp;/&nbsp;0</span>
							<img class="next-page" @click="obj.nextPage > 0?(value=='' ? loadPage(obj.nextPage,typeid):loadPageByVal(obj.nextPage,value)):''">
						</div>
					</div>
				</div>
			</div>
		</div>

		<script type="text/javascript">
			var size = 10;

			var vm = new Vue({
				el: '#list',
				data: {
					obj: {}, //文章记录
					typeobj: {}, //文章类型
					systemobj: {}, //系统信息
					activeClass: -1, //类型下标
					typeid: '', //类型ID
					value: '' //搜索内容
				},
				methods: {
					loadPage(num, tid) { //加载记录
						var _this = this;
						axios({
							method: 'get',
							url: getRootURL() + 'article/query-all-page',
							params: {
								pagenum: num,
								pagesize: size,
								typeid: tid
							},
							headers: {
								'Content-Type': 'application/x-www-form-urlencoded'
							}
						}).then(function(res) {
							console.log(res);

							if (res.data.status >= 0) {
								_this.obj = res.data.object
								_this.top()
							} else {
								alert(res.data.msg);
							}

						}).catch(function(err) {
							alert(err);
						});
					},
					loadPageByVal(num, value) { //按内容或标题加载记录
						console.log(value)
						var _this = this;
						axios({
							method: 'get',
							url: getRootURL() + 'article/query-all-val',
							params: {
								pagenum: num,
								pagesize: size,
								value: value
							},
							headers: {
								'Content-Type': 'application/x-www-form-urlencoded'
							}
						}).then(function(res) {
							console.log(res);

							if (res.data.status >= 0) {
								_this.obj = res.data.object
								_this.top()
							} else {
								alert(res.data.msg);
							}

						}).catch(function(err) {
							alert(err);
						});
					},
					changeForVal(e) { //改变事件
						var _this = this;
						_this.loadPageByVal(1, e.target.value);
						_this.$data.activeClass = -2; //取消激活样式
					},
					loadType() { //加载文章类型
						var _this = this;
						axios({
							method: 'get',
							url: getRootURL() + 'articleType/query-all',
							params: {

							},
							headers: {
								'Content-Type': 'application/x-www-form-urlencoded'
							}
						}).then(function(res) {
							console.log(res);

							if (res.data.status >= 0) {
								_this.typeobj = res.data.object
							} else {
								alert(res.data.msg);
							}

						}).catch(function(err) {
							alert(err);
						});
					},
					loadSystem() { //加载系统信息
						var _this = this;
						axios({
							method: 'get',
							url: getRootURL() + 'system/query',
							params: {
								id: "system"
							},
							headers: {
								'Content-Type': 'application/x-www-form-urlencoded'
							}
						}).then(function(res) {
							console.log(res);

							if (res.data.status >= 0) {
								_this.systemobj = res.data.object
							} else {
								alert(res.data.msg);
							}

						}).catch(function(err) {
							alert(err);
						});
					},
					loadByType(typeid) { //按类型加载记录
						var _this = this;
						_this.typeid = typeid;
						_this.loadPage(1, _this.$data.typeid);
					},
					getItme(index, typeid) { //点击变换样式
						var _this = this;
						_this.$data.value = ''; //清空搜索值
						_this.activeClass = index; //把当前点击元素的index，赋值给activeClass
						_this.loadByType(typeid);
					},
					top() { //滚动条高度置0
						let issue = document.getElementById('issue');
						issue.scrollTop = 0;
					},
					jump(url,id) { //页面跳转
						if(id!==null&&id!==''){
							$.session.set("id", id);
						}
						$(location).attr('href', url);
					},
					onSubmit() {
						//防止form冒泡
						return false;
					}
				},
				created() {
					var _this = this;
					_this.loadPage(1, this.$data.typeid); //初始化文章记录
					_this.loadType(); //初始化文章类型
					_this.loadSystem(); //初始化系统信息
				},
				mounted() {

				}
			})
		</script>
	</body>
</html>
